<template>
  <div>
    <van-nav-bar title="详情" left-arrow @click-left="$router.back()" />
    <dl>
      <dt>
        <img :src="item.url" alt="" />
      </dt>
      <dd>
        <h3>{{ item.title }}</h3>
      </dd>
    </dl>

    <p>{{ item.desc }}</p>

    <ul>
      <li v-for="(v, i) in item.mess" :key="i">
        <p>{{ v.nickname }}</p>
        <p>{{ v.con }}</p>
        <p>
          <van-icon
            name="good-job-o"
            @click="handleZan(v)"
            :class="{ red: v.isRed }"
          />{{ v.zan }}
        </p>
      </li>
    </ul>
    <!-- 底部弹框 -->
    <van-button type="primary" @click="show = true">写评论</van-button>
    <van-action-sheet v-model="show" title="评论">
      <van-cell-group>
        <van-field
          v-model="value"
          placeholder="请输入用户名"
          type="textarea"
          rows="10"
        />
      </van-cell-group>
      <van-button type="primary" @click="handleAddMess">提交评论</van-button>
    </van-action-sheet>
    <!--  商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服"/>
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="totalCount" @click="$router.push('/home/car')"/>
      <van-goods-action-icon icon="shop-o" text="店铺"/>
      <van-goods-action-button type="warning" text="加入购物车" @click="handleClickAddCar"/>
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>


<script>
import axios from "axios";
// import { mapState, mapMutations } from 'vuex'
export default {
  name: "Detail",
  computed: {
    // ...mapState(['item']),
    totalCount() {
      return this.$store.getters.totalCount
    }
  },
  methods: {
    // ...mapMutations(['Fetch_Item'])
    // 点赞
    handleZan(v) {
      //
      v.zan++;
      // 控制高亮
      v.isRed = true;
      // this.$set(v, 'isRed', true)
    },
    // 处理点击评论
    handleAddMess() {
      // 关闭弹框
      this.show = false;
      // 推入数据
      this.item.mess.push({
        nickname: "管理员",
        con: this.value,
        zan: 0
      });
    },
    //加入购物车
    handleClickAddCar() {
      this.$store.commit('Add_Car', { ...this.item })
    }
  },
  data() {
    return {
      // 详情数据
      item: {},
      // 底部弹框
      show: false,
      // 评论数据
      value: ""
    };
  },
  created() {
    // this.Fetch_Item(this.$route.params.id)

    // 请求详情数据
    const { id } = this.$route.params;
    axios.post("/api/detail", { id }).then(resp => {
      console.log(resp.data);
      this.item = resp.data.data;
    });
  }
};
</script>

<style scoped lang="scss">
dl {
  display: flex;
}

ul {
  li {
    list-style: none;
    padding: 20px;
    border-bottom: 1px solid #ccc;
    margin: 10px 0;
  }
}

.red {
  color: red;
}
</style>